<template>
  <section class="hero">
    <div class="container hero-content" v-reveal>
      <h1>浪浪山 · 小妖怪</h1>
      <p class="flex">{{ quote }} <el-icon @click="refresh"><Refresh /></el-icon></p>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
const quote = ref('翻过这座山，可能还是山，但不翻过去，你永远不知道山后面是什么。')

const refresh = () => {
  const quoteArr = [
    "翻过这座山，可能还是山，但不翻过去，你永远不知道山后面是什么。",
    "怕什么前路漫漫，走一步，便有一步的光亮。",
    "发光不用一辈子，只要一次，能照亮谁的眼睛就够了。",
    "小时候以为自己是齐天大圣，长大后发现自己是只小猪妖，被困在浪浪山，一心想要出去。",
    "很多人都想走出浪浪山，但是走出浪浪山的时候才发现，你再也找不到像浪浪山这样的地方了。",
    "你以为修炼成仙就没有烦恼了吗？",
    "我们不是故事里的背景板，要做自己的主角。",
    "长生不老不是终点，走在路上的自己才是。",
    "每一个用力生活的大小孩都是浪浪山上的小妖怪",
  ]
  const randomQuote = quoteArr[Math.floor(Math.random() * quoteArr.length)]
  quote.value = randomQuote

}
</script>


<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  background-size: cover;
  border-bottom: 1px solid rgba(255, 153, 102, 0.25);
}
.hero-content {
  text-align: center;
  padding: 80px 0 64px;
}
.hero h1 {
  margin: 0 0 12px;
  font-size: 36px;
  color: #a64b10;
}
.hero p {
  margin: 0 0 24px;
  font-size: 16px;
  color: #7a5b4b;
}
.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
</style> 